<!--  -->
<template>

  <div class="popularity">
<section class="container-main-header">
          <section class="header-left">
            <i class="el-icon-menu"></i>
            <span>首页</span>/
            <span>营销</span>/
            <span>人气推荐</span>
          </section>
          <section class="header-right">
            <i class="el-icon-pear"></i>
          </section>
        </section>
    <section class="app-main">
      <div class="miaosha-box">
        <div class="search-Box">
          <div class="search-box">
            <div>
              <i class="el-icon-search"></i>&nbsp;&nbsp;
              <span>筛选搜索 (优惠)</span>
              <el-button type="primary" style="float: right; ">主要按钮</el-button>
              <el-button style="float: right;margin-right:15px;">重置</el-button>
            </div>
            <div class="miaosha-input">
              <span>专题名称：</span>
              <el-input placeholder="请输入内容" v-model="input" clearable style="width:200px"></el-input>
              <span>推荐状态：</span>
              <el-select v-model="value" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="datalist" style="margin-top:20px;">
          <div class="datalist-box">
            <i class="el-icon-document"></i>&nbsp;&nbsp;
            <span>数据列表</span>
            <el-button class="addactivity" style="float: right;padding:6px 14px">添加</el-button>
          </div>
        </div>
        <div class="table-container">
          <template>
            <el-table
               ref="multipleTable"
            :data="tableData.slice((currentPage - 1) * pageSize, currentPage*pageSize)"
            :border="border"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="60" align="center"></el-table-column>
              <el-table-column label="编号" prop="date"></el-table-column>
              <el-table-column label="品牌名称" prop="name"></el-table-column>
              <el-table-column label="是否推荐" align="center">
                <template slot-scope="scope">
                  <el-switch
                   v-model="scope.row.value"
                    active-text=""
                    inactive-text=""
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="排序" prop="rank"></el-table-column>
              <el-table-column label="状态" prop="state"></el-table-column>
              <el-table-column align="right">
                <template slot="header">
                  <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                </template>
                <template slot-scope="scope">
                  <el-button type="text" @click="openee">排序</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        
        </div>
        <el-pagination
          @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15,]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
            style="float:right;"
        ></el-pagination>
      </div>
    </section>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import Common from  "../components/Common.vue";
export default {
  name: "Subject",
  props: {
    msg: String,
  },

  //import引入的组件需要注入到对象中才能使用
  // components: {
  //     common:Common
  // },
  data() {
    //这里存放数据
    return {
      input: "",
      value:"",
      kaiguan: true,
      options: [
        {
          value: "选项1",
          label: "未推荐",
        },
        {
          value: "选项2",
          label: "推荐中",
        },
      ],
      tableData: [
        {
          date: "1",
          name: "小米",
          rank: "100",
          value:true,
          state: "推荐中",
        },
        {
          date: "3",
          name: "oppo",
          rank: "2",
          value:false,
          state: "推荐中",
        },
        {
          date: "5",
          name: "华为",
          rank: "8",
          value:true,
          state: "推荐中",
        },
        {
          date: "7",
          name: "中兴",
          rank: "10",
          value:true,
          state: "推荐中",
        },
        {
          date: "11",
          name: "爱国者",
          rank: "10",
          value:true,
          state: "推荐中",
        },
        {
          date: "22",
          name: "vivo",
          rank: "10",
          value:false,
          state: "推荐中",
        },
        {
          date: "31",
          name: "十八线小作坊🍎",
          rank: "10",
          value:true,
          state: "推荐中",
        },
        
      ],
      search: "",
 // 分页数据
      currentPage: 1,
      pageSize: 5,
      total: 0, // 总条目数
      multipleSelection: [],
      border: true,
      select: "",
      input: "",
      value1: "",
      border: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {openee() {
        this.$prompt('排序', '设置排序', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[1-9][0-9]{0,2}/,
          inputErrorMessage: '您输入的顺序有误'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你设置的排序为: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '您取消输入'
          });       
        });
      },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
        this.pageSize=val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val;
    },
    handleDelete(index, row) {
      this.deleteBrand(row.id);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleDelete(index, item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
.container-main-header {
  padding: 0 20px;
  align-items: center;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.el-icon-menu {
  margin-right: 20px;
}
.el-icon-pear {
  font-size: 24px;
}
.app-main {
  min-height: 100%;
}
.miaosha-box {
  padding: 20px;
}
.app-main .miaosha-box .search-Box,
.datalist {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  border-radius: 4px;
}
.app-main .miaosha-box .search-Box .search-box,
.datalist-box {
  padding: 20px;
}
.app-main .miaosha-box .miaosha-input {
  /* width: 380px; */
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-top: 30px;
}
.app-main .miaosha-box .miaosha-input span {
  /* width: 130px; */
  margin-left: 60px;
  font-size: 16px;
}
.addactivity span {
  width: 82px;
  height: 12px;
  line-height: 12px;
  font-size: 12px;
}
.datalist-content {
  /* width: 1127px; */
  min-height: 48px;
  margin-top: 20px;
}
.hang {
  height: 48px;
}

.tablee > tr > td {
  border: 1px solid #ececec;
  text-align: center;
  line-height: 48px;
  border-right: none;
}
.operation {
  font-size: 13px;
}
.operation > button {
  border: none;
  outline: none;
  margin: 0 5px;
  background: #fff;
  color: #66b1ff;
}
</style>